
<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Special Reading</i></h5>
                            </div>
                           <div class="ibox-content">
                            <form class="form-horizontal" id="mr_report">
                              <div class="form-group">
                                <label class="col-lg-4 control-label">Meter Reader</label>
                                  <div class="col-lg-4">
                                    <input type="text" name="meter_reader" class="form-control">
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label style="text-align: right;" class="col-lg-4 control-label">Read Year-Month</label>
                                  <div class="col-lg-4 input-daterange input-group">
                                      <select name="year" class="form-control-custom">
                                        <?php
                                        $mon = array('','January','February','March','April','May','June','July','August','September','October','November','December');
                                        for($i = date('Y'); $i >= 2010 ; $i--):?>
                                          <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                                        <?php endfor; ?>
                                      </select>
                                      <span class="input-group-addon">-</span>
                                     <select name="month" class="form-control-custom">
                                        <?php for($o = 1; $o <= 12; $o++):?>
                                          <option value="<?php echo $o < 10 ? '0'.$o : $o; ?>"><?php echo $mon[$o]; ?></option>
                                        <?php endfor; ?>
                                     </select>
                                  </div>
                              </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label"></label>
                                     <div class="col-sm-10">
                                       <div class="row">
                                       <div class="col-md-9">
                                       <p class="text-center">
                                        <button class="btn btn-primary btn-outline btn-md m-t-n-xs" id="get-status-mr" type="button"><i class="fa fa-check fa-fw"></i> Get Status</button></p>
                                        </div>
                                      </div>
                                     </div>
                                  </div>
                             </form>
                           </div><!-- END OF IBOX CONTENT -->
                           <div id="result">
                             <p id="search_values"></p>
                             <div class="horizontal-slide">
                              <div class="table-responsive">
                                  <table class="dataTables table table-bordered table-hover">
                                    <thead id="result-head">
                                    </thead>
                                    <tbody id="result-body"></tbody>
                                  </table>
                              </div>
                            </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<script>
      $(document).ready(function(){
        var tab = 0;
        $('#get-status-mr').click(function(){
            if(tab == 1){
              $('.dataTables').dataTable().fnDestroy();
            }
            //
            $('#result-body').html('');
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax')); ?>/get_status_mr",
                data: $('#mr_report').serialize(),
                dataType: 'json',
                success: function(data){
                  tab = 1;
                  $('#result-head').html(data.head);
                  $('#result-body').html(data.body);
                  $('#get-status').removeAttr('disabled');
                  $('.dataTables').DataTable({
                    "order": [[ 1, "desc" ]],
                    "columnDefs": [ {
                      "targets": 'no-sort',
                      "orderable": false,
                      } ],
                      "sDom": 'Ttipf',
                      "oLanguage": {
                        "sSearch": "Filter:" //search
                      },
                      "tableTools": {
                            "aButtons": [{
                                            "sExtends": "copy",
                                            "sButtonText": "Copy to clipboard"
                                        },
                                        {
                                            "sExtends": "xls",
                                            "sButtonText": "Export to Excel"
                                        }],
                            "sSwfPath": "<?php echo base_url() ?>assets/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                    }
                  });
                },
                complete: function() {
                   $('#get-status-mr').removeAttr('disabled');
                },
                beforeSend: function(){
                   $('#get-status-mr').attr('disabled',true);
                }
            });
        });
      });
</script>